<script setup lang="ts">

import Avatar from '../components/avatar/index.vue'
import { ref } from 'vue'
import { getMovieByKeyword } from '../api/movie'
import { Search } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const store = useStore()
const router = useRouter()
const keyword = ref('')


const doSearch = () => {
    store.commit('app/changeMaskStatus',true)
    store.commit('app/setKeyword',keyword.value)
    let arr = keyword.value.split(' ')
    getMovieByKeyword(arr).then((res:any) => {
        if (res.code === 200) {
            console.log("关键词搜索",res.data)
            store.commit('app/setSearchList', res.data)
        }else{
          ElMessage.error("关键词搜索失败")
        }
    })
}

const jump = (path:string) => {
    router.push({
        path: '/my/order'
    })
}
</script>

<template>
    <header>
        <a href="#" class="logo">Logo</a>
        <el-input v-model="keyword" placeholder="请输入地域名称或电影名称或类型并以空格分隔" class="input-with-select">
            <template #append>
                <el-button :icon="Search" @click="doSearch"/>
            </template>
        </el-input>
        <ul>
            <li @click="jump('/my/order')"><el-tag type="warning">我的订单</el-tag></li>
            <li>
                <Avatar></Avatar>
            </li>
        </ul>
    </header>

</template>

<style>

</style>
<style scoped lang="less">
@leftAndRight: 100px;
.input-with-select {
    width: 50%;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.6s;
    padding: 20px @leftAndRight;
    z-index: 400;
}

header.sticky {
    background: rgba(255, 255, 255, .9);
}
header.sticky li{
    color: black;
}

header .logo {
    position: relative;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0;
    z-index: 400;
}

header ul {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul li {
    position: relative;
    padding: 0 20px;
    list-style: none;
    cursor: pointer;
}

header ul li a {
    position: relative;
    margin: 0 15px;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 500px;
    transition: 0.5s;
}

header.sticky .logo,
header.sticky ul li a {
    color: #000;
}
</style>